<template>
  <a-modal
    :title="title"
    :width="650"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('systemManagement.close')"
    wrapClassName="ant-modal-cust-warp"
    >
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
         {{$t('systemManagement.close')}}
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item v-for="(item,index) in priceList" v-if="item.id !== '0'" >
          <div style="width: 120px;float: left;">
            <span style="margin-left:10px;margin-right:10px;">{{ item.name }}</span>
          </div>
          <span style="margin-left:10px;margin-right:10px;">=</span>
          <a-select @change="changeMode" v-decorator="[ item.codeFormula, { initialValue:'0' } ]" style="width:150px;margin-right:20px;">
            <a-select-option
              v-for="(item1,index) in priceList"
              :key="item1.id"
              :value="item1.id">
              {{ item1.name }}
            </a-select-option>
          </a-select>
            
            <a-select @change="changeMode" v-decorator="[ item.codeOperator, { initialValue:'1' } ]" style="width:65px;margin-right:20px;">
              <a-select-option
                v-for="(item2,index) in priceOperator"
                :key="item2.id"
                :value="item2.id">
                {{ item2.value }}
              </a-select-option>
            </a-select>
            <a-input style="width:150px;" :placeholder="$t('popup.pleasePrice')" v-decorator.trim="[ item.code, { initialValue:'0' } ]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { batchUpdatePrice } from '@/api/api'

  export default {
    name: 'BatchSetPriceModal',
    inject:['loadData1'],
    data () {
      return {
        title:this.$t('popup.batchSettings'),
        visible: false,
        isReadOnly: false,
        batchType: '',
        priceMode: '',
        priceOperator: [
          {
            id: '1',
            value: this.$t('otherJS.sum')
          },
          {
            id: '2',
            value: this.$t('otherJS.substract')
          },
          {
            id: '3',
            value: this.$t('otherJS.multiplication')
          },
          {
            id: '4',
            value: this.$t('otherJS.division')
          }
        ],
        priceList: [
          {
            id: '0',
            name: this.$t('otherJS.yetFormula'),
            code: '',
            codeFormula: '',
            codeOperator: ''
          },
          {
            id: '1',
            name: this.$t('otherJS.purchasePrice'),
            code: 'purchaseDecimal',
            codeFormula: 'purchaseDecimalFormula',
            codeOperator: 'purchaseDecimalOperator'
          },
          {
            id: '2',
            name: this.$t('otherJS.retailPrice'),
            code: 'commodityDecimal',
            codeFormula: 'commodityDecimalFormula',
            codeOperator: 'commodityDecimalOperator'
          },
          {
            id: '3',
            name: this.$t('otherJS.upsetPrice'),
            code: 'wholesaleDecimal',
            codeFormula: 'wholesaleDecimalFormula',
            codeOperator: 'wholesaleDecimalOperator'
          },
          {
            id: '4',
            name: this.$t('otherJS.firstLevel'),
            code: 'lowDecimal',
            codeFormula: 'lowDecimalFormula',
            codeOperator: 'lowDecimalOperator'
          },
          {
            id: '5',
            name: this.$t('otherJS.secondLevel'),
            code: 'twoWholesaleDecimal',
            codeFormula: 'twoWholesaleDecimalFormula',
            codeOperator: 'twoWholesaleDecimalOperator'
          },
          {
            id: '6',
            name: this.$t('otherJS.thirdLevel'),
            code: 'threeWholesaleDecimal',
            codeFormula: 'threeWholesaleDecimalFormula',
            codeOperator: 'threeWholesaleDecimalOperator'
          },
          {
            id: '7',
            name: this.$t('otherJS.fourthLevel'),
            code: 'fourWholesaleDecimal',
            codeFormula: 'fourWholesaleDecimalFormula',
            codeOperator: 'fourWholesaleDecimalOperator'
          },
          {
            id: '8',
            name: this.$t('otherJS.fifthLevel'),
            code: 'fiveWholesaleDecimal',
            codeFormula: 'fiveWholesaleDecimalFormula',
            codeOperator: 'fiveWholesaleDecimalOperator'
          },
        ],
        ids: [],
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          price:{
            rules: [
              { required: true, message: this.$t('popup.pleasePrice')+'!' }
            ]}
        }
      }
    },
    created () {
    },
    methods: {
      changeMode(item) {
      },
      add (type) {
        this.batchType = type
        if(type === 'purchase') {
          this.title = this.$t('popup.purchaseSetting')
        } else if(type === 'commodity') {
          this.title = this.$t('popup.retailSetting')
        } else if(type === 'wholesale') {
          this.title = this.$t('popup.salesSetting')
        } else if(type === 'low') {
          this.title = this.$t('popup.minimumSetting')
        }
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.ids = record
        // this.model = Object.assign({}, record);
        // this.model.purchaseDecimalFormula = '0'
        // this.model.commodityDecimalFormula = '0'
        // this.model.wholesaleDecimalFormula = '0'
        // this.model.lowDecimalFormula = '0'
        // this.model.twoWholesaleDecimalFormula = '0'
        // this.model.threeWholesaleDecimalFormula = '0'
        // this.model.fourWholesaleDecimalFormula = '0'
        // this.model.fiveWholesaleDecimalFormula = '0'
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'purchaseDecimalFormula', 'commodityDecimalFormula', 'wholesaleDecimalFormula', 'lowDecimalFormula', 'twoWholesaleDecimalFormula', 'threeWholesaleDecimalFormula',
            'fourWholesaleDecimalFormula','fiveWholesaleDecimalFormula'))
        });
        this.visible = true;
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        // let price = this.form.getFieldValue('price')
        this.form.validateFields((err, values) => {
          // 这里做逻辑处理
          // console.log(values) // { username: '' }
          values.ids = this.ids
          batchUpdatePrice(values).then((res)=>{
            if(res.code === 200) {
              this.loadData1()
              this.$message.success(this.$t('commodityManagement.batchEditPriceSuccess'))
            }
          })
        })
        // this.$emit('ok', price, this.batchType);
        this.visible = false
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style scoped>

</style>